<template>
  <div class="s">

<div class="city">
  <h1>金海豚除螨</h1>
</div>
<div class="topswip"> 
  <van-swipe :autoplay="3000" :show-indicators="false">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" />
  </van-swipe-item>
</van-swipe>
<div class="main">
  <div>
    <div class="main_b">
      <ul>
        <router-link to="service">
      <li>
        <a href="#"></a>
        <p>服务介绍</p>
      </li>
      </router-link>
      <router-link to="scope">
      <li>
        <a href="#"></a>
        <p>服务范围</p>
      </li>
       </router-link>
      <router-link to="xianshi">
      <li>
        <a href="#"></a>
        <p>价目中心</p>
      </li>
       </router-link>
      <router-link to="help">
        <li>
        <a href="#"></a>
        <p>帮助中心</p>
      </li>   
       </router-link>  
      </ul>
  </div>
  </div>
  <div class="main_c">
      <h1>服务订购</h1>
      <router-link to="price">
      <li>
        <a href="#"></a>
        <p>自定义清洁套餐<span>订购次数越多，单次服务费越低...</span></p>
      </li>
      </router-link>
  </div>
   <div class="space"></div>

</div>
</div>
 <div class="main_d">
      <h1>产品图片</h1>
      <li>
        <a href="#"></a>
        <p>专业服务+顶尖设备<br><span>为你带去一个无螨的居家环境</span></p>
      </li>
  </div>
<tabbar></tabbar>
  
  </div>

</template>


<script>
import tabbar from "../components/tabbar"
  export default {
data() {
        return {
           images:[
              require("../assets/swiper2.jpg"),
             require("../assets/swiper.jpg"),
             require("../assets/swiper1.jpg"),
            
           ]
        }
    },
    methods: {
       
    },
    components:{
      tabbar
    }
  }


</script>
<style lang="less" scoped>
.space {
  height: 10px;
  background-color: #fff;
}
.s{
  height: 100px;
  .topswip{
    >p {
      font-size: 12px;
      text-align: center;
      line-height: 30px;
      color: #7a7a7a;
    }
  }
}
  .topbar{
    background-color: #1b388c;
  }
  .van-nav-bar__title{
    color: #fff;
  }
  .van-icon-arrow-left:before{
    color:#000;
  }
.city {
   h1{
     font-size: 16px;
     margin-left: 20px;
   }
}
.topswip {
  margin-top: 10px;
  background-color: #fff;
  .van-swipe {
    width: 90%;
    height: 180px;
    margin-left: 20px;
    border-radius: 10px;
}
  img {
    width: 100%;
    height: 100%;
    background-size: 100%;
  }
}
.main {
  width: 95%;
  margin: 0 auto;
  background-color: #fff;
  div {
    margin-top: 10px;
    li {
      display: flex;
      margin-left: 20px;
      padding: 5px;
      align-items: center;
      >a{
        width: 20px;
        height: 14px;
        background: url("../assets/sound.png") no-repeat;
        background-size: 80%
      }
      p{
        margin-top: 5px;
        font-size: 12px;
      }
    }
  }
  .main_c{
    h1{
      font-size: 15px;
      margin-left: 10px;
      margin: 0px 10px;
      display: flex;
      align-items: center;
    }
    h1::before {
      content: "";
      width: 6px;
      height: 18px;
      display: inline-block;
      background-color: #0eaaed;
      border-radius: 20px;
      margin-right: 5px;
    }
    li {
      display: flex;
      align-items: center;
      a {
        width: 120px;
        height: 60px;
        background: url("../assets/safa.png") no-repeat;
        background-size: 100%
      }
      p {
        margin-left: 10px;
        font-size: 15px;
        span{
          display: block;
          font-size: 12px;
          margin-top: 5px;
          color: #7a7a7a;
        }
      }
    }
  }
  .main_b {
    h1{
      font-size: 14px;
      margin-left: 10px;
    }
    ul{
      display: flex;
      justify-content: space-around;
     >a:nth-child(2){
        a{
        width: 45px;
        height: 45px;
        background: url("../assets/jiesao_2.png") no-repeat;
        background-size: 90%
        } 
      } 
      a:nth-child(3){
        a{
        width: 45px;
        height: 45px;
        background: url("../assets/jiesao_3.png") no-repeat;
        background-size: 100%
        } 
      } 
      a:nth-child(4){
        a{
        width: 45px;
        height: 45px;
        background: url("../assets/jiesao_4.png") no-repeat;
        background-size: 100%
        } 
      } 
    li {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 5px;
      a {
        width: 45px;
        height: 45px;
        background: url("../assets/jiesao_1.png") no-repeat;
        background-size: 100%;
        margin: 0 auto;
      }
      p {
        width: 100%;
        text-align: center;
        font-size: 13px;
        margin-top: 5px;
        span{
          display: block;
          font-size: 11px;
        }
      }
    }     
  }
}
}
.main_d {
  height: 250px;
    h1{
      font-size: 15px;
      margin-left: 20px;
      display: flex;
      align-items: center;
    }
     h1::before {
      content: "";
      width: 6px;
      height: 18px;
      display: inline-block;
      background-color: #0eaaed;
      border-radius: 20px;
      margin-right: 5px;
    }
    li{
      display: flex;
      margin: 30px;
      >a{
        width: 130px;
        height: 130px;
        background: url("../assets/sha_2.png") no-repeat;
        background-size: 100%
    }
      >p{
        font-size: 15px;
        margin: 0;
        margin-top: 20px;
        margin-left: 10px;
        span{
          display: block;
          color: #7a7a7a;
          margin-top: 5px;
          font-size: 13px;
        }
      }
    }
    
}
</style>
